<template>
    <div class="container">
        <div class="block-box flex flex-between pos-rel" v-for="(item,index) in dataList" :key="index">
            <div class="left"><img class="width-90 height-90" v-if="item.pictureUrl" :src="item.pictureUrl" alt=""></div>
            <div class="right height-90 width-240">
                <div>
                    <div class="flex flex-between">
                        <div class="marketName-box font-15 font-color font-w">{{item.marketName}}</div>
                        <!-- 按钮的显示切换 -->
                        <!-- 如果没有到期时间即为未开通 -->
                        <div v-if="!item.memberAppId">
                            <div v-if="storeCardFlag === 0 || storeCardFlag === ''">
                                <label class="btn-mark" v-if="item.ordinaryAmount === '0.00'" @click="paymentClick(item.appMarketId,0)">
                                  <button>免费获取</button>
                                </label>
                                <label class="btn-mark" v-else @click="paymentClick(item.appMarketId,1)">
                                  <button>￥{{item.ordinaryAmount}}</button>
                                </label>
                            </div>
                            <div v-else-if="storeCardFlag === 1">
                                <label class="btn-mark" v-if="item.storeAmount === '0.00'" @click="paymentClick(item.appMarketId,0)">
                                  <button>免费获取</button>
                                </label>
                                <label class="btn-mark" v-else @click="paymentClick(item.appMarketId,1)">
                                  <button>￥{{item.storeAmount}}</button>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="font-12 font-color-9 mar-t-10 line">{{item.marketRemark}}</div>
                </div>
                <!-- 底部的显示切换 -->
                <div v-if="item.expireTime" class="font-12">
                    到期时间：<span class="font-orange">{{item.expireTime}}</span>
                </div>
                <div v-else class="font-12 font-color-6 flex">
                    <div v-if="storeCardFlag === 0 || storeCardFlag === ''">
                        <div v-if="item.ordinaryAmount === '0.00'">
                            标准版：<span class="font-red font-w">免费</span>
                        </div>
                        <div v-else>
                            标准版：<span class="font-red font-w">{{item.ordinaryAmount}}/{{item.ordinaryPeriod}}年</span>
                        </div>
                    </div>
                    <div class="mar-l-9" v-else-if="storeCardFlag === 1">
                        <div v-if="item.storeAmount === '0.00'">
                            高级版：<span class="font-red font-w">免费</span>
                        </div>
                        <div v-else>
                            高级版：<span class="font-red font-w">{{item.storeAmount}}/{{item.ordinaryPeriod}}年</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { pageSysAppMarket, submitAppOrder, getAppOrderByMarketId } from '@/api/personal'
export default {
  data() {
    return {
      currentPage: 1,
      pullLoad: {
        loading: false,
        finished: false
      },
      dataList: [],
      lastPage: 0,
      storeCardFlag: 0,
      submitted: false
    }
  },
  onShow() {
    this.storeCardFlag = this.getStoreCardFlag
    this.currentPage = 1
    this.dataList = []
    this.pageLoad()
  },
  onReachBottom() {
    // 触底刷新
    if (!this.pullLoad.finished) {
      this.pageLoad()
    }
  },
  methods: {
    paymentClick(appMarketId, free) {
      const that = this
      let params = {
        memberId: this.getCustomerId,
        appMarketId: appMarketId
      }
      submitAppOrder(params).then((response) => {
        if (response.isError) {
        // 打开提交
          that.submitted = false
          return
        }
        const payParams = response.data
        if (free === 0) {
          that.$utils.showToast({
            title: '开通成功!',
            duration: 1500
          })
          setTimeout(() => {
            let postData = JSON.stringify(payParams)
            that.$pt.navigateTo({ url: '/pages/home/application-market/pay-success/main?params=' + postData })
          }, 1500)
        } else {
          that.wxPayEls(payParams, appMarketId)
        }
      }).catch(() => {
      })
    },
    wxPayEls(payParams, appMarketId) {
      const that = this
      let params = {
        // 调用后端接口所需的参数
        memberId: this.getCustomerId,
        appMarketId: appMarketId
      }
      that.$pt.requestPayment(
        {
          'timeStamp': payParams.timeStamp,
          'nonceStr': payParams.nonceStr,
          'package': payParams.package,
          'signType': payParams.signType,
          'paySign': payParams.paySign,
          'success': function(res) {
            that.$utils.showToast({
              title: '支付成功!',
              duration: 1500
            })
            let postData = ''
            getAppOrderByMarketId(params).then(response => {
              postData = JSON.stringify(response.data)
            }).catch({
            })
            setTimeout(() => {
              that.$pt.navigateTo({ url: '/pages/home/application-market/pay-success/main?params=' + postData })
            }, 1500)
          },
          'fail': function(res) {
            that.$utils.showToast({ title: '支付失败，请重新支付' })
            // 打开提交
            that.submitted = false
          }
        })
    },
    pageLoad() {
      let params = {
        memberId: this.getCustomerId,
        size: 10,
        currentPage: this.currentPage
      }
      pageSysAppMarket(params).then((response) => {
        if (response.isError) return
        if (this.currentPage !== this.lastPage) {
          response.data.records.forEach(item => {
            this.dataList.push(item)
          })
        }
        this.currentPage++
        if (this.dataList.length === 0 || this.dataList.length >= response.data.total) {
          this.pullLoad.finished = true
        }
      }).catch(() => {
      })
    }
  }
}
</script>
<style lang="less" scoped>
.btn-mark{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: inline-block;
  button{
    max-width: 80px;
    position: absolute;
    right: 14px;
    top: 17px;
  }
}
.block-box{
    background-color: white;
    padding: 15px; 
    margin-bottom: 7px;
    .right{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .marketName-box{
          overflow:hidden;
          text-overflow:ellipsis;
          display:-webkit-box;
          -webkit-line-clamp:1;
          -webkit-box-orient:vertical;
          word-break:break-word;
          width: 155px;
        }
        button{
            color: white;
            font-size: 12px;
            padding: 3px 12px;
            min-width: 80px;
            background-color: #339dff;
            line-height: normal;
            border-radius: 20px;
            &::after{
                border: unset;
            }
        }
    }
}
.divider{
    height: 1px;
    background-color: #c5c5c5;
    width: 38%;
}
.line{
  // height: 20px;
  // line-height: 1.3;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  word-break:break-word;
}
</style>
